<!--
 * @Author: 梁青春
 * @Date: 2025-10-11 08:33:27
 * @LastEditTime: 2025-11-19 09:50:35
 * @LastEditors: 梁青春
-->
<template>
  <el-container>
    <el-aside v-if="showLeft" :width="leftWidth">
      <slot name="left"></slot>
    </el-aside>
    <el-main>
      <slot></slot>
    </el-main>
    <!-- 响应式右侧内容：结合原有 showRight prop 和窗口宽度判断 -->
    <el-aside v-if="showRight && shouldShowRight" :width="rightWidth">
      <slot name="right"></slot>
    </el-aside>
  </el-container>
</template>
<script setup name="Container">
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  showLeft: {
    type: Boolean,
    default: true
  },
  showRight: {
    type: Boolean,
    default: true
  },
  leftWidth: {
    type: String,
    default: '320px'
  },
  rightWidth: {
    type: String,
    default: '320px'
  }
})

// 响应式窗口宽度状态
const windowWidth = ref(window.innerWidth)

// 窗口大小变化监听器
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

// 计算是否应该显示右侧内容
// 结合原有的 showRight prop 和窗口宽度判断
const shouldShowRight = computed(() => {
  return windowWidth.value >= 780
})

// 组件挂载时添加事件监听器
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>
<style scoped lang="scss">
.el-aside {
  margin-bottom: 0;
  padding: 0;
}
.el-main {
  min-width: 460px;
}
.el-container {
  height: 100%;
  padding: 0;
  border: 1px solid #e4e7ed;
}
</style>
